function fangDaJing() {
    var oBox = document.querySelector('#box');
    var oTop = document.querySelector('#top');
    var oSmallImg = document.querySelector('#smallImg');
    var oShadow = document.querySelector('#shadow');
    var oBigShadow = document.querySelector('#bigShadow');
    var oBigImg = document.querySelector('#bigImg');
    var list = document.querySelectorAll('#nav li');

    var oShadowWidth = parseInt(getStyle(oShadow, 'width'));
    var oShadowHeight = parseInt(getStyle(oShadow, 'height'));
    var maxLeft = oTop.clientWidth - oShadowWidth;
    var maxTop = oTop.clientHeight - oShadowHeight;
    var oBigShadowWidth = parseInt(getStyle(oBigShadow, 'width'));
    var oBigShadowHeight = parseInt(getStyle(oBigShadow, 'height'));

    for (var i = 0; i < list.length; i++) {
        list[i].onmouseenter = function () {
            oSmallImg.src = this.getAttribute('data-small');
            oBigImg.src = this.getAttribute('data-big');
        }
    }

    oTop.onmousemove = function (e) {
        var ev = event || e;
        oShadow.style.display = 'block';
        oBigShadow.style.display = 'block';

        var left = ev.pageX - oBox.offsetLeft - oShadowWidth / 2;
        var top = ev.pageY - oBox.offsetTop - oShadowHeight / 2;

        if (left <= 0) {
            left = 0;
        }
        if (left >= maxLeft) {
            left = maxLeft;
        }
        if (top <= 0) {
            top = 0;
        }
        if (top >= maxTop) {
            top = maxTop;
        }

        oShadow.style.left = left + 'px';
        oShadow.style.top = top + 'px';

        var scale = (oBigImg.offsetWidth - oBigShadow.offsetWidth) / (oTop.offsetWidth - oShadow.offsetWidth);

        oBigImg.style.left = -left * scale + 'px';
        oBigImg.style.top = -top * scale + 'px';

        var bigShadowLeft = left - (oBigShadowWidth - oShadowWidth) / 2;
        var bigShadowTop = top - (oBigShadowHeight - oShadowHeight) / 2;

        oBigShadow.style.left = bigShadowLeft + 'px';
        oBigShadow.style.top = bigShadowTop + 'px';

        oTop.onmouseleave = function () {
            oShadow.style.display = 'none';
            oBigShadow.style.display = 'none';
        }
    }

    // 获取样式兼容函数
    function getStyle(obj, attr) {
        if (getComputedStyle) {
            return getComputedStyle(obj, false)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }
}